import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import type { VxeColumnSlotTypes } from 'vxe-table'
import type { TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import { CalculateDayTypeCnEnum, CalculateFeeTypeCnEnum, DangerRuleCnEnum, getKeyToEnum, LevelCnEnum, OccupationLevelCnEnum } from '@/const/enum'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'
import type { RadioChangeEvent } from 'ant-design-vue'

export type InsurancePriceDataDto = Pick<InsureEnsurePlanDto, 'calculateFeeType' | 'calculateDayNum' | 'calculateType' | 'ensureFeeLevel' | 'insureCompanyFeeLevel'>

@Component({
    emits: ['submit', 'reset']
})
export class InsurancePriceView extends Render {
    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '新增保费',
            width:'640px',
            theme: 'dark',
            show: false,
            labelCol: {
                style: {
                    width: '8em'
                }
            },
            items: {
                calculateFeeType: {
                    name: '保费计算',
                    element: 'radioGroup',
                    required:true,
                    options: getKeyToEnum(CalculateDayTypeCnEnum),
                    callback: {
                        change: (ev: RadioChangeEvent) => {
                            const value = ev.target.value
                            console.log(ev)
                            this.formConfig.items.calculateDayNum.hidden = value !== CalculateDayTypeCnEnum.天数
                        }
                    }
                },
                calculateDayNum: {
                    name: '保费计算天数',
                    element: 'input',
                    required:true,
                    hidden: true
                },
                calculateType: {
                    name: '计费方式',
                    element: 'radioGroup',
                    required:true,
                    options: getKeyToEnum(CalculateFeeTypeCnEnum)
                },
                feeLevel : {
                    name: '保费价格',
                    element: 'customInsurancePriceTable',
                    params: {
                        tableColumnConfig: [
                            {
                                field: 'grade',
                                title: '风险等级',
                                slots: {
                                    default: ({
                                        row,
                                        column
                                    }: VxeColumnSlotTypes.ContentSlotParams) => {
                                        return <div>{OccupationLevelCnEnum[row.dangerLevel]}</div>
                                    }
                                }
                            },
                            {
                                field: 'monthFee',
                                editRender: { name: 'VxeInput' },
                                slots: {
                                    header: () => {
                                        return (
                                            <>
                                                <div>成本保费</div>
                                                <div class="text-black-300 text-sm">(元/月)</div>
                                            </>
                                        )
                                    }
                                }
                            },
                            {
                                field: 'dailyFee',
                                editRender: { name: 'VxeInput' },
                                slots: {
                                    header: () => {
                                        return (
                                            <div class="py-10">
                                                <div>日保费</div>
                                                <div class="text-black-300 text-sm">(元/日)</div>
                                            </div>
                                        )
                                    }
                                }
                            },
                        ] as TableRenderColumnTypes<ReportCaseResultDto>,
                        tableData: [{
                            grade: '1-3类',
                            dangerLevel: OccupationLevelCnEnum['1-3类'],
                            monthFee: '',
                            dailyFee:''
                        },{
                            grade: '4类',
                            dangerLevel: OccupationLevelCnEnum['4类'],
                            monthFee: '',
                            dailyFee:''
                        },{
                            grade: '5类',
                            dangerLevel: OccupationLevelCnEnum['5类'],
                            monthFee: '',
                            dailyFee:''
                        },{
                            grade: '6类',
                            dangerLevel: OccupationLevelCnEnum['6类'],
                            monthFee: '',
                            dailyFee:''
                        }]
                       
                    }
                },
                // effectiveTime : {
                //     name: '生效时间',
                //     element: 'datetime',
                //     required:true,
                // },
                // endDate : {
                //     name: '结束日期',
                //     element: 'datetime',
                //     placeholder: '“长期有效”可不选择结束时间',
                // }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                this.formConfig.show = false
                // this.showChange(false)
            },
            cancel: () => {
                this.formConfig.show = false
                // this.showChange(false)
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }
    
    async submit() {
        await this.basicForm.validate()
        const data = getModelValue(this.formConfig)
        const { feeLevel, ...otherData } = data
        const feeLevelData = feeLevel.map((item: typeof feeLevel) => {
            return {
                dangerLevel: item.dangerLevel,
                monthFee: item.monthFee,
                dailyFee: item.dailyFee
            }
        })

        return {
            ...otherData,
            ensureFeeLevel: feeLevelData,
            calculateDayNum: otherData.calculateDayNum === '-1' ? -1 : Number(otherData.calculateDayNum),
            insureCompanyFeeLevel: feeLevelData
        } as InsurancePriceDataDto
    }

    reset() {
        console.log('reset2')
        initModelValue(this.formConfig)
        this.basicForm.clear()
    }

    created() { 
        this.basicForm = renderForm(this.formConfig)
    }
    render() {
        return < >
            { this.basicForm.element() }
        </> 
    }
}

export default toNative<{}, {}>(InsurancePriceView)